<template>
  <div>
    <el-popover
      placement="bottom"
      v-model="visible"
      width="500"
      trigger="click"
      class="wrap_pop"
    >
      <div class="all_wrap">
        <div class="title">
          全部歌单分类
        </div>
        <div class="all">
          <el-button plain round>全部歌单</el-button>
        </div>
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="item-left">
            <i :class="[`iconfont`, iconList[index]]"></i>
            <span>{{ categories[index] }}</span>
          </div>
          <div class="item-right">
            <el-button-group>
              <el-button
                @click="allChange(index, ind)"
                v-for="(btnItem, ind) in item"
                :key="ind"
                >{{ btnItem.name }}</el-button
              >
            </el-button-group>
          </div>
        </div>
      </div>
      <el-button slot="reference">
        {{ cat }}
        <i class="vbestui-iconfont icon-qian"></i>
      </el-button>
    </el-popover>
    <div class="hot_tag">
      <div class="hot_title">热门标签：</div>
      <div class="hot_list">
        <a
          :class="acIndex == index ? 'active' : ''"
          @click="changeActive(index, item.name)"
          v-for="(item, index) in hotTags"
          :key="index"
          href="#"
          >{{ item.name }}</a
        >
      </div>
    </div>
    <!-- 歌单部分 -->
    <div class="all_music">
      <music-list :musiclist="playlist"></music-list>
    </div>

    <!-- 分页器 -->
    <div class="page_wrap">
      <el-pagination
        background
        :current-page="offset"
        :page-size="50"
        :total="total"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  _getCatList,
  _getMusicListHot,
  _getPlayList
} from '../../network/allmusic'
import musicList from '../../components/Musiclist/Musiclist.vue'
import { computed } from 'vue'
export default {
  data () {
    return {
      categories: [], //分类标题
      list: [], //所有分类过滤好的数据
      visible: false, //弹出层控制
      hotTags: [], //热门标签
      acIndex: null, //热门标签的激活
      iconList: [
        //分类的图标数组
        'icon-global',
        'icon-music',
        'icon-kafei',
        'icon-biaoqing',
        'icon-huatizhuti'
      ],
      cat: '全部', //分类
      limit: 50, //条数
      offset: 1, // 页码
      playlist: [],
      total: 0 //总数据条数
    }
  },
  components: { musicList },
  created () {
    // 获取歌单分类接口
    _getCatList().then(res => {
      console.log(res)
      this.categories = Object.values(res.data.categories)
      console.log(this.categories) //["情感","主题",""]
      let sub = res.data.sub //所有数据 70条
      // 根据数据的下标也是分类  去对比每个数据
      for (let i = 0; i < this.categories.length; i++) {
        this.list[i] = sub.filter(item => {
          return item.category == i
        })
      }
      console.log(this.list)
    })

    // 获取热门标签
    _getMusicListHot().then(res => {
      console.log(res)
      this.hotTags = res.data.tags
    })
    // 初始化歌单
    this.getPlayList()
  },
  computed: {
    getOffset () {
      return (this.offset - 1) * this.limit
    }
  },
  methods: {
    pageChange (val) {
      //分页改变事件
      console.log(val)
      this.offset = val
      this.getPlayList()
    },
    // 点击所有分类
    allChange (index, index2) {
      console.log(index, index2)
      // 让当前分类 等于数组中的具体分类
      this.cat = this.list[index][index2].name
      this.getPlayList()
      this.visible = false //关闭弹出层
    },
    // 点击热门标签
    changeActive (index, name) {
      this.acIndex = index
      this.cat = name //让当前分类等于热门标签
      this.getPlayList()
    },
    async getPlayList () {
      //获取歌单接口调用
      var res = await _getPlayList(this.cat, this.limit, this.getOffset)
      console.log(res)
      this.playlist = res.data.playlists
      this.total = res.data.total //总数据条数
    }
  }
}
</script>
<style lang="less" scoped>
.all_wrap {
  padding: 20px 0;
  overflow-y: auto;
  height: 400px;
  .all {
    width: 100%;
    .el-button {
      width: 100%;
    }
  }
}
.item {
  width: 100%;
  display: flex;
  margin-top: 13px;
  &-left {
    height: 30px;
    width: 80px;
    line-height: 30px;
    margin-right: 10px;
    font-size: 20px;
  }
  &-right {
    flex: 1;
  }
}
.hot_tag {
  width: 100%;
  padding: 10px 0;
  line-height: 40px;
  height: 40px;
  display: flex;
}
.hot_list {
  display: flex;
  width: 800px;
  line-height: 40px;
  height: 40px;
  justify-content: space-around;
  a {
    text-decoration: none;
    color: #000;
  }
  .active {
    color: seagreen;
  }
}
.page_wrap {
  margin-bottom: 100px;
}
</style>
